<template>
  <div class="electronic_list_detail">
    <div class="search-box">
      <Row type="flex" justify="space-between">
        <Row type="flex">
          <Col class="search-item">
            <span class="search-label">电子码:</span>
            <Input
              suffix="ios-search"
              search
              @on-search="search"
              v-model="searchObj.ecodeNoLike"
              @on-keyup="filterSpace"
              :maxlength="30"
              placeholder="请输入"
            ></Input>
          </Col>
          <Col class="search-item">
            <span class="search-label">电子码状态:</span>
            <Select v-model="searchObj.ecodeStatus" style="width:200px" @on-change="search" clearable>
              <Option
                v-for="item in statusList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}</Option>
            </Select>
          </Col>
        </Row>
        <Row>
          <Col class="search-item" style="margin-right:30px;">
            <Button type="primary" @click="doSearch">导出电子码</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <Table
      :loading="loading"
      :height="this.tableHeight"
      ref="selection"
      :columns="columns"
      :data="partyList"
      stripe
      class="table-list"
    >
       <template slot-scope="{ row }" slot="ecodeType">
        <span>{{['静态','动态'][row.ecodeType]}}</span>
      </template>
       <template slot-scope="{ row }" slot="periodType">
        <span>{{['指定时间段','相对时间段'][row.periodType]}}</span>
      </template>
       <template slot-scope="{ row }" slot="ecodeStatus">
        <span>{{['已激活','已核销','已过期','已作废'][row.ecodeStatus]}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
       <Poptip
          confirm
          title="是否确定作废"
          @on-ok="ok(row, index)"
          @on-cancel="cancel"
          class="poptip_del"
        >
          <i class="iconsys iconzuofei" title="作废电子码" v-if="row.ecodeStatus===0"></i>
        </Poptip>
      </template>
    </Table>
    <div class="page-box">
      <Page
        :total="pageObj.total"
        :page-size="pageObj.pageSize"
        :current="pageObj.pageIndex"
        :page-size-opts="[10, 20, 50, 100]"
        show-total
        show-sizer
        @on-change="changePageIndex"
        @on-page-size-change="changePageSize"
      />
    </div>
  </div>
</template>
<script>
import { lookEcodeList, invalidEcode, ecodeExport } from '@/api/system/fishing.js'
import { mapState } from 'vuex'
import { blobToXls } from '@/libs/blobToXls'
export default {
  name: 'electronic_list_detail',
  data () {
    return {
      searchObj: {
        ecodeNoLike: '',
        ecodeStatus: ''
      },
      loading: false,
      tableHeight: 0,
      ecodeProductId: '',
      pageObj: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      },
      partyList: [],
      columns: [
        {
          title: '电子码',
          key: 'ecodeNo',
          align: 'center'
        },
        {
          title: '电子码名称',
          key: 'ecodeName',
          align: 'center'
        },
        {
          title: '有效期类型',
          slot: 'periodType',
          align: 'center'
        },
        {
          title: '生效开始时间',
          key: 'beginAt',
          align: 'center'
        },
        {
          title: '生效结束时间',
          key: 'endAt',
          align: 'center'
        },
        {
          title: '电子码类型',
          slot: 'ecodeType',
          align: 'center'
        },
        {
          title: '电子码状态',
          slot: 'ecodeStatus',
          align: 'center'
        },
        {
          title: '核销时间',
          key: 'verifyAt',
          align: 'center'
        },
        {
          title: '操作',
          width: 200,
          slot: 'action',
          align: 'center'
        }
      ],
      statusList: [
        {
          value: 0,
          label: '已激活'
        },
        {
          value: 1,
          label: '已核销'
        },
        {
          value: 2,
          label: '已过期'
        },
        {
          value: 3,
          label: '已作废'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      merchantId: state => state.user.merchantId,
      userId: state => state.user.userId,
      userName: state => state.user.userName
    })
  },
  mounted () {
    this.ecodeProductId = this.$route.query.id
    this.getlist()
  },
  methods: {
    doSearch () {
      ecodeExport({
        merchantId: this.merchantId,
        ecodeProductId: this.ecodeProductId,
        ecodeNoLike: this.searchObj.ecodeNoLike,
        ecodeStatus: this.searchObj.ecodeStatus
      }).then(res => {
        if (res.status === 200) {
          blobToXls(res.data, '电子码产品表')
        }
      })
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getlist()
    },
    getlist () {
      this.loading = true
      lookEcodeList({
        merchantId: this.merchantId,
        ecodeProductId: this.ecodeProductId,
        ...this.searchObj,
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.partyList = res.data.data
          this.pageObj.total = res.data.totalCount
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    filterSpace () {
      this.searchObj.ecodeNoLike = this.searchObj.ecodeNoLike ? this.searchObj.ecodeNoLike.replace(/\s+/g, '') : ''
    },
    look () {

    },
    uptShow () {

    },
    ok (row) {
      invalidEcode({
        merchantId: this.merchantId,
        ecodeId: row.ecodeId,
        updater: this.userId,
        updaterName: this.userNam
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('作废成功')
          this.getlist()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    cancel () { },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getlist()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getlist()
    }
  }
}
</script>
<style lang="less">
.electronic_list_detail .ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  left: 10px;
}
</style>
